<template>
	<view>
		<!-- #ifdef APP-PLUS || H5 -->
		<web-view v-if="modelValue" :webview-styles="webviewStyles"
			:src="`/hybrid/html/dxf.html?src=${encodeSrc}${encodeFontUrl ? '&fontUrl=' + encodeFontUrl : ''}`"
			@message="handleMessage"></web-view>
		<!-- #endif -->
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		onUnmounted,
		reactive,
		ref
	} from 'vue';

	const props = defineProps(['src', 'fontUrl', 'modelValue'])
	const emit = defineEmits(['update:modelValue', 'close'])
	const encodeSrc = computed(() => encodeURIComponent(props.src))
	const encodeFontUrl = computed(() => encodeURIComponent(props.fontUrl))
	const webViewRef = ref()
	const webviewStyles = reactive({
		width: '100%',
		height: '100%'
	})
	const handleMessage = (evt) => {
		evt.detail.data.forEach(data => {
			if (data.action == 'close') emit('update:modelValue', false)
		})
	}

	// #ifdef H5
	const h5HandleMessage = (evt) => {
		if (evt.data.data.arg.action == 'close') emit('update:modelValue', false)
	}

	onMounted(() => {
		window.addEventListener('message', h5HandleMessage)
	})
	onUnmounted(() => {
		window.removeEventListener('message', h5HandleMessage)
	})
	// #endif
</script>

<style scoped>
</style>